<template>
  <a-modal
    :open="visible"
    @update:open="visible = $event"
    title="编辑员工"
    :width="520"
    :maskClosable="false"
    @cancel="handleCancel"
    class="employee-modal"
    :bodyStyle="{ padding: '24px' }"
    :headerStyle="{ borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }"
    :footer="null"
  >
    <div class="modal-content">
      <a-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        layout="horizontal"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 14 }"
      >
      <a-form-item label="账号" name="account">
        <a-input v-model:value="formData.account" placeholder="请输入账号" allow-clear :disabled="true" />
      </a-form-item>
      
      <a-form-item label="员工姓名" name="name">
        <a-input v-model:value="formData.name" placeholder="请输入员工姓名" allow-clear />
      </a-form-item>
      
      <a-form-item label="手机号" name="phone">
        <a-input v-model:value="formData.phone" placeholder="请输入手机号" allow-clear />
      </a-form-item>
      
      <a-form-item label="邮箱" name="email">
        <a-input v-model:value="formData.email" placeholder="请输入邮箱" allow-clear />
      </a-form-item>
      
      <a-form-item label="性别" name="gender">
        <a-radio-group v-model:value="formData.gender">
          <a-radio value="MALE">男</a-radio>
          <a-radio value="FEMALE">女</a-radio>
        </a-radio-group>
      </a-form-item>
      
      <a-form-item label="状态" name="status">
        <a-radio-group v-model:value="formData.status">
          <a-radio value="ENABLE">启用</a-radio>
          <a-radio value="DISABLE">禁用</a-radio>
        </a-radio-group>
      </a-form-item>
      </a-form>
      
      <div class="form-footer">
        <a-button class="cancel-btn" @click="handleCancel">取消</a-button>
        <a-button type="primary" class="submit-btn" :loading="loading" @click="handleSubmit">确定</a-button>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, reactive, defineProps, defineEmits, watch } from 'vue'
import { Form, message } from 'ant-design-vue'
import { updateEmployee } from '@/api/employee'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  employeeData: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:visible', 'success'])

// 表单引用
const formRef = ref()
const loading = ref(false)

// 表单数据
const formData = reactive({
  id: '',
  account: '',
  name: '',
  phone: '',
  email: '',
  gender: 'MALE',
  status: 'ENABLE'
})

// 表单验证规则
const rules = {
  name: [
    { required: true, message: '请输入员工姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '姓名长度应为2-20个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  status: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ]
}

// 监听对话框显示状态变化
watch(() => props.visible, (val) => {
  if (val && props.employeeData) {
    // 当对话框打开且有员工数据时，初始化表单数据
    Object.assign(formData, {
      id: props.employeeData.id || '',
      account: props.employeeData.account || '',
      name: props.employeeData.name || '',
      phone: props.employeeData.phone || '',
      email: props.employeeData.email || '',
      gender: props.employeeData.gender || 'MALE',
      status: props.employeeData.status || 'ENABLE'
    })
  }
})

// 取消操作
const handleCancel = () => {
  emit('update:visible', false)
}

// 提交表单
const handleSubmit = () => {
  formRef.value
    .validate()
    .then(async () => {
      loading.value = true
      try {
        await updateEmployee(formData)
        message.success('更新员工成功')
        emit('update:visible', false)
        emit('success')
      } catch (error) {
        console.error('更新员工失败:', error)
        message.error('更新员工失败')
      } finally {
        loading.value = false
      }
    })
    .catch(error => {
      console.log('表单验证失败:', error)
    })
}
</script>

<style lang="scss" scoped>
.employee-modal {
  :deep(.ant-modal-content) {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  :deep(.ant-modal-header) {
    background-color: #fff;
    
    .ant-modal-title {
      font-size: 18px;
      font-weight: 600;
      color: #1f1f1f;
    }
  }
  
  .modal-content {
    max-height: 65vh;
    overflow-y: auto;
    padding-right: 4px;
    
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-thumb {
      background-color: #d9d9d9;
      border-radius: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background-color: #f5f5f5;
      border-radius: 6px;
    }
  }
  
  .ant-form-item {
     margin-bottom: 20px;
     
     :deep(.ant-form-item-label) {
       line-height: 30px;
       
       label {
         font-weight: 500;
         color: #262626;
         height: 30px;
       }
     }
     
     :deep(.ant-form-item-control-input) {
       min-height: 30px;
     }
    
    :deep(.ant-input), :deep(.ant-select) {
      padding: 3px 12px;
      border-radius: 6px;
      transition: all 0.3s;
      height: 30px;
      max-width: 320px;
      
      &:hover, &:focus {
        border-color: #1890ff;
      }
      
      &:disabled {
        background-color: #f5f5f5;
        color: #00000073;
        cursor: not-allowed;
      }
    }
    
    :deep(.ant-select-selector) {
      height: 30px !important;
      padding: 0 12px !important;
      border-radius: 6px !important;
      
      .ant-select-selection-search-input {
        height: 28px !important;
      }
      
      .ant-select-selection-item {
        line-height: 28px !important;
      }
    }
    
    :deep(.ant-radio-wrapper) {
      margin-right: 24px;
      height: 30px;
      line-height: 30px;
    }
  }
  
  .form-footer {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
    
    .cancel-btn {
      margin-right: 16px;
      min-width: 80px;
    }
    
    .submit-btn {
      min-width: 80px;
    }
  }
}
</style>